<template>
  <div class="main">
    <el-scrollbar style="height:100%">
      <div class="content">
        <el-row>
          <el-col
            style="margin-top:10px"
            :span="4"
            v-for="(o, index) in result"
            :key="o"
            :offset="index > 0 ? 3 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
              <img src="/static/image/car.jpg" class="image" />
              <div style="padding: 14px;">
                车牌号：<span>{{ o.car_number }}</span>
                <div class="bottom clearfix">
                  地点：<span>{{ o.etcname }}</span>
                </div>
                <div class="bottom clearfix" style="color:red">
                  过车时间：<span>{{ o.time }}</span>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!--弹出层查看详细通行记录 -->
      <el-dialog
        title="详细通行数据"
        :visible.sync="dialogFormVisible"
        width="900px"
        top="200px"
      >
        <el-table :data="tableData" height="250" border style="width: 100%">
          <el-table-column prop="car_number" label="车牌号"> </el-table-column>
          <el-table-column prop="idcard" label="身份证号"> </el-table-column>
          <el-table-column prop="time" label="日期"> </el-table-column>
          <el-table-column prop="name" label="姓名"> </el-table-column>
          <el-table-column prop="etcname" label="Etc姓名"> </el-table-column>
          <el-table-column prop="area_name" label="地区"> </el-table-column>
        </el-table>
      </el-dialog>
    </el-scrollbar>
  </div>
</template>

<script>
import { getWailaiCar } from "@/api/moxing";
export default {
  data() {
    return {
      result: "",
      dialogFormVisible: false,
      tableData: ""
    };
  },
  methods: {
    //查看详细的通行数据
    getCarInfo(o) {
      var params = {
        car_number: o.car_number,
        etc_name: o.etcname
      };
      getCarInfo("/moxing/getCarInfo", params).then(res => {
        if (res.code === 200) {
          this.tableData = res.data;
          this.dialogFormVisible = true;
        } else if (res.code === 500) {
          this.$message(res.data);
        }
      });
    }
  },
  //初始化的时候初始化表格大小
  created() {
    getWailaiCar("/moxing/getWailai").then(res => {
      if (res.code === 200) {
        this.result = res.data;
      } else if (res.code === 500) {
        this.$message(res.data);
      }
    });
  },
  mounted() {}
};
</script>
<style scoped>
.main {
  width: 100%;
  height: 680px;
  border: 1px solid red;
}
.content {
  margin-left: 130px;
}
.el-col-offset-3 {
  margin-left: 0.5%;
}
.image {
  height: 200px;
}
.button {
  padding: 10;
  float: right;
}
</style>
